<template>
  <div class="course">
    <div class="topadvertisePage">
      <p>精彩专题</p>
      <div class="advertise">
        <EnterBig
          :src="'https://assets-cdn.lanqb.com/topic/topic-1.jpg'"
          :width="283"
          :height="60"
        >
        </EnterBig>
        <EnterBig
          :src="'https://assets-cdn.lanqb.com/topic/topic-2.jpg'"
          :width="283"
          :height="60"
        >
        </EnterBig>
        <EnterBig
          :src="'https://assets-cdn.lanqb.com/topic/topic-3.jpg'"
          :width="283"
          :height="60"
        >
        </EnterBig>
        <EnterBig
          :src="'https://assets-cdn.lanqb.com/topic/topic-4.jpg'"
          :width="283"
          :height="60"
        >
        </EnterBig>
      </div>
    </div>
    <div class="classificationPage">
      <div class="tile">
        <h3>教程分类</h3>
      </div>
      <Classification
        :arr="classAll"
        :changeIndex="changeIndex"
        :getclass="getclass"
        :title="'领域'"
      ></Classification>
      <Classification
        :arr="classAll[classIndex].class"
        :key="classIndex"
        :getclass="getclass"
        :title="'分类'"
      ></Classification>
    </div>
    <div class="contentPage">
      <div class="content">
        <!-- props:['imgsrc','courseTitle','wacthNumber','autorimgsrc','autorName'] -->
        <ul
          class="infinite-list content"
          v-infinite-scroll="load"
          style="overflow: auto"
          infinite-scroll-disabled="disabled"
        >
          <li
            v-for="item in showData"
            :key="item.courseZID"
            class="infinite-list-item"
            v-on:click="linkInfo(item.courseZID)"
          >
            <CourseBox
              :imgsrc="item.img"
              :courseTitle="item.title"
              :wacthNumber="item.students"
              :autorimgsrc="item.autorImg"
              :autorName="item.autorName"
              
            ></CourseBox>
          </li>
        </ul>
        <div class="loadmore" >
          <p class="p1" v-if="loading" v-on:click="loadclick">加载更多</p>
          <p class="p2" v-if="!loading">没有更多了</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import EnterBig from "@/components/ZComponents/enterBig";
import Classification from "@/components/ZComponents/classification";
import CourseBox from "@/components/ZComponents/courseBox";

export default {
  data() {
    return {
      classAll: [
        {
          title: "全部",
          class: [
            "角色",
            "五官",
            "头像",
            "发型",
            "植物",
            "动物",
            "手账",
            "透视",
            "光影",
            "色彩",
            "UI设计",
            "线条",
            "人体",
            "写实",
            "构图",
            "笔刷",
            "素描",
            "贴图",
            "皮肤",
            "衣服",
            "景观",
            "软件操作",
            "漫画",
            "平面设计",
          ],
        },
        {
          title: "日系插画",
          class: [
            "角色",
            "五官",
            "头像",
            "发型",
            "透视",
            "光影",
            "色彩",
            "线条",
            "人体",
            "构图",
            "笔刷",
            "皮肤",
            "衣服",
            "景观",
            "软件操作",
            "漫画",
            "平面设计",
          ],
        },
        {
          title: "古风插画",
          class: [
            "角色",
            "五官",
            "头像",
            "发型",
            "透视",
            "光影",
            "色彩",
            "线条",
            "人体",
            "构图",
            "笔刷",
            "皮肤",
            "衣服",
            "景观",
            "植物",
            "软件操作",
            "漫画",
          ],
        },
        {
          title: "游戏原画",
          class: [
            "角色",
            "动物",
            "光影",
            "色彩",
            "人体",
            "写实",
            "构图",
            "皮肤",
            "衣服",
            "景观",
            "软件操作",
          ],
        },
        {
          title: "概念设计",
          class: [
            "角色",
            "五官",
            "透视",
            "光影",
            "色彩",
            "线条",
            "人体",
            "构图",
            "贴图",
            "景观",
          ],
        },
        {
          title: "商业插画",
          class: [
            "角色",
            "透视",
            "光影",
            "色彩",
            "构图",
            "皮肤",
            "漫画",
            "平面设计",
          ],
        },
        {
          title: "纸绘",
          class: [
            "角色",
            "五官",
            "头像",
            "发型",
            "手账",
            "透视",
            "光影",
            "色彩",
            "线条",
            "人体",
            "构图",
            "素描",
            "漫画",
          ],
        },
        {
          title: "插画绘画",
          class: [
            "角色",
            "五官",
            "头像",
            "发型",
            "植物",
            "动物",
            "透视",
            "光影",
            "色彩",
            "UI设计",
            "线条",
            "人体",
            "写实",
            "构图",
            "笔刷",
            "素描",
            "贴图",
            "皮肤",
            "衣服",
            "景观",
            "软件操作",
            "漫画",
            "平面设计",
          ],
        },
        {
          title: "设计",
          class: [
            "角色",
            "五官",
            "头像",
            "发型",
            "植物",
            "动物",
            "透视",
            "光影",
            "色彩",
            "UI设计",
            "线条",
            "人体",
            "写实",
            "构图",
            "笔刷",
            "素描",
            "贴图",
            "皮肤",
            "衣服",
            "景观",
            "软件操作",
            "漫画",
            "平面设计",
          ],
        },
        {
          title: "模型",
          class: [
            "角色",
            "五官",
            "头像",
            "发型",
            "植物",
            "透视",
            "光影",
            "人体",
            "写实",
            "构图",
            "贴图",
            "皮肤",
            "衣服",
            "景观",
            "软件操作",
          ],
        },
        {
          title: "动画",
          class: ["角色", "五官", "光影", "色彩", "人体", "构图", "软件操作"],
        },
      ],
      classIndex: 0,
      courseData: [],
      showData: [],
      count: 0,
      disabled: true,
      loading: true,
    };
  },
  components: {
    EnterBig,
    Classification,
    CourseBox,
  },
  methods: {
    linkInfo(id){
      this.$router.push({path:"/courseInfoz",query:{id}})
      
    },
    getclass(item) {
      console.log(this.classAll[this.classIndex].title, item);
      if (this.classAll[this.classIndex].title == item) {
        item = undefined;
      }
      this.axios("/zjr/courseClassFindz", {
        params: {
          classifation: this.classAll[this.classIndex].title,
          classType: item,
        },
      }).then((resovle) => {
        this.courseData.length = 0;
        let arr=resovle.data.sort((a,b)=>{
          return Math.random()>0.5?1:-1;
        })
        this.courseData.push(...arr);
        this.count = 0;
        this.showData.length = 0;
        this.load();
      });
    },
    changeIndex(index) {
      console.log(222222);
      this.classIndex = Number(index) + 1;
      console.log(this.classIndex);
    },
    loadclick() {
      this.load();
    },
    load() {
      console.log(8998844889);
      this.loading=true;
      this.count++;
      let temp = this.count * 20;
      if (temp > this.courseData.length) {
        this.loading = false;
        for (let i = temp - 20; i < this.courseData.length; i++) {
          this.showData.push(this.courseData[i]);
        }
      } else {
        for (let i = temp - 20; i < temp; i++) {
          this.showData.push(this.courseData[i]);
        }
      }
    },
  },
  async mounted() {
    const requste = await this.axios("/zjr/courseFindz");
    let arr=requste.data.sort((a,b)=>{
          return Math.random()>0.5?1:-1;
        })
    this.courseData.push(...arr);
    console.log(requste);
    this.load();
  },
};
</script>

<style lang="scss" scoped>
.topadvertisePage {
  margin: 0 auto;
  width: 1200px;
  padding-bottom: 15px;
  padding-top: 20px;
  border-bottom: 1px solid rgb(224, 224, 224);
  p {
    font-size: 16px;
    color: #87959f;
  }
  .advertise {
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
  }
}
.classificationPage {
  margin: 0 auto;
  margin-top: 10px;
  padding-bottom: 20px;

  width: 1200px;
  .tile {
    margin-bottom: 10px;
  }
}
.contentPage {
  background-color: #f6f8fa;
  .content {
    margin: 0 auto;
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    width: 1200px;
    .loadmore {
      margin: 10px 0;
      width: 1400px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      .p1 {
        background-color: #fff;
        padding: 10px 200px;
        border-radius: 12px;
        box-shadow: 2px 5px 5px #87959f;
        color: #ccc;
        transition: all 0.4s;
        &:hover {
        color: rgb(126, 126, 126);

          box-shadow: 1px 3px 3px #566068;
        }
      }
      .p2 {
        background-color: #fff;
        padding: 10px 200px;
        border-radius: 12px;
        color: #ccc;
      }
    }
  }
}
</style>